<template>
   <div class="dishes-add-or-update">
      <el-form :model="formData" :rules="formRules" ref="dataForm" label-width="100px">
         <el-form-item label="菜品名" prop="spuName">
            <el-input v-model="formData.spuName"></el-input>
         </el-form-item>
         <el-form-item label="推荐理由" prop="recommendReason">
            <el-input v-model="formData.recommendReason"></el-input>
         </el-form-item>
         <el-form-item>
            <!--一个下拉框-->
            <el-select v-model="formData.classifyId" placeholder="菜品分类" clearable>
               <!--一个单独的选项，名为全部，值为空-->
               <el-option label="全部" value="0"></el-option>
               <el-option v-for="item in classes" :key="item.classifyId" :label="item.classifyName"
                  :value="item.classifyId"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="主图">
            <el-upload :action="url" :show-file-list="false" :on-success="handleUploadSuccess"
               :before-upload="beforeUpload" multiple>
               <el-button slot="trigger" size="small" type="primary">上传图片</el-button>
               <el-button @click="removeMain()" size="small" type="danger">删除主图</el-button>
            </el-upload>
            <img v-if="formData.spuImage" :src="formData.spuImage" alt="主图" style="max-width: 200px; max-height: 200px;">

         </el-form-item>
         <el-form-item label="材料">
            <el-input v-model="formData.dishesDetail.eaterial"></el-input>
         </el-form-item>
         <el-form-item label="口味">
            <el-input v-model="formData.dishesDetail.taste"></el-input>
         </el-form-item>
         <el-form-item label="步骤">
            <div v-for="(step, index) in formData.dishesDetail.cooking_methods" :key="index" class="step-item">
               <el-input v-model="formData.dishesDetail.cooking_methods[index]" class="step-input"></el-input>
               <el-button @click="removeStep(index)" type="danger" class="step-remove-btn">删除</el-button>
            </div>
            <el-button @click="addStep()">添加步骤</el-button>
         </el-form-item>
         <el-form-item label="营养价值">
            <el-row v-for="(nutrient, index) in formData.nutritionalContent.data" :key="index">
               <el-col :span="6">
                  <el-form-item label="名称">
                     <el-input v-model="nutrient.name"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                  <el-form-item label="含量">
                     <el-input v-model="nutrient.value"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                  <el-button @click="removeNutritionalItem(index)" type="danger">删除</el-button>
               </el-col>
            </el-row>
            <el-button @click="addNutritionalItem()" type="primary">添加营养成分</el-button>
            <el-form-item label="总热量">
               <el-input v-model="formData.nutritionalContent.totalHeat"></el-input>
            </el-form-item>
         </el-form-item>
         <el-form-item>
            <el-button @click="back()">返回</el-button>
            <el-button v-if="formData.spuId === 0" type="primary" @click="submitForm('新增')">新增</el-button>
            <el-button v-else type="primary" @click="submitForm('修改')">修改</el-button>
         </el-form-item>
      </el-form>

   </div>
</template>

<script>
export default {
   data() {
      return {
         spuId: this.$route.params.id,
         formData: {},
         url: this.$http.adornUrl(`/minio/upload?token=${this.$cookie.get('token')}`),
         formRules: {},
         classes: []
      }
   },
   methods: {
      handleUploadSuccess(response, file, fileList) {
         this.formData.spuImage = response;
      },
      removeMain() {
         if (this.spuId === 0) {
            this.$http({
               url: this.$http.adornUrl(`/minio/delete`),
               method: 'get',
               params: this.$http.adornParams({
                  'name': this.formData.spuImage
               })
            }).then(({ data }) => {
               console.log(data)
            })
         }
         this.formData.spuImage = ''
      },
      beforeUpload(file) {
         return true;
      },
      addStep() {
         // 在数组中添加一个空字符串，作为新的步骤描述
         this.formData.dishesDetail.cooking_methods.push('');
      },
      removeStep(index) {
         // 从数组中删除指定索引的步骤
         this.formData.dishesDetail.cooking_methods.splice(index, 1);
      },
      back() {
         this.$router.push({ name: 'dishes' });
         if (this.formData.spuImage !== '') {
            this.removeMain()
         }
      },
      addNutritionalItem() {
         this.formData.nutritionalContent.data.push({ name: '', value: '' });
      },
      removeNutritionalItem(index) {
         this.formData.nutritionalContent.data.splice(index, 1);
      },
      getClass() {
         this.$http({
            url: this.$http.adornUrl(`/web/classfication/list`),
            method: 'get',
         }).then(({ data }) => {
            this.classes = data.list
         })
      },
      initFormData() {
         if (this.spuId === 0) {
            // 新增模式，清空表单数据
            this.formData = {
               spuId: this.spuId,
               spuName: '',
               spuImage: '',
               recommendReason: '',
               dishesDetail: {
                  eaterial: "",
                  taste: "",
                  cooking_methods: []
               },
               nutritionalContent: {
                  data: [], totalHeat: ""
               },
               classifyId: ""
            }
         } else {
            this.$http({
               url: this.$http.adornUrl(`/web/spuController/get/${this.spuId}`),
               method: 'get'
            }).then(({ data }) => {
               this.formData=data.vo
            })
         }
      },
      submitForm(action) {
         if (action === '新增') {
            this.$http({
               url: this.$http.adornUrl(`/web/spuController/save`),
               method: 'post',
               data: this.formData
            }).then(({ data }) => {
               console.log(this.formData)
               console.log(data)
            })
         }
         if (action === '修改') {
            this.$http({
               url: this.$http.adornUrl(`/web/spuController/update`),
               method: 'post',
               data: this.formData
            }).then(({ data }) => {
               console.log(data)
            })
         }
         this.$router.push({ name: 'dishes' });
      },

   },
   activated() {
      this.initFormData()
      this.getClass()
   }
}

</script>

<style>
.step-item {
   display: flex;
   /* 使用Flex布局 */
   align-items: center;
   /* 垂直居中对齐 */
}

.step-input {
   flex: 1;
   /* 让输入框占据剩余空间 */
   margin-right: 10px;
   /* 设置输入框和按钮之间的间距 */
}
</style>